// 分页器组件
import { useState } from "react";
import PropTypes from "prop-types";

import SoftPagination from "components/SoftPagination";
import SoftInput from "components/SoftInput";
import Icon from "@mui/material/Icon";
import SoftBox from "components/SoftBox";

function Pagination({ totalPages, currentPage, onPageChange }) {
  const [inputPage, setInputPage] = useState(currentPage);

  const handleInputChange = (e) => {
    const value = parseInt(e.target.value);
    setInputPage(value);
    onPageChange(value);
  };


  const renderPaginationItems = () => {
    if (totalPages > 6) {
      return (
        <SoftBox width="5rem" mx={1}>
          <SoftInput
            mx={1}
            inputProps={{ type: "number", min: 1, max: totalPages }}
            value={inputPage}
            onChange={handleInputChange}
          />
        </SoftBox>
      );
    } else {
      const items = [];
      for (let i = 1; i <= totalPages; i++) {
        items.push(
          <SoftPagination item key={i} active={i === currentPage} onClick={() => onPageChange(i)}>
            {i}
          </SoftPagination>
        );
      }
      return items;
    }
  };
  return (
    <>
      <SoftPagination>
        {currentPage > 1 && (
          <SoftPagination item onClick={() => onPageChange(currentPage - 1)}>
            <Icon>keyboard_arrow_left</Icon>
          </SoftPagination>
        )}
        {renderPaginationItems()}
        {currentPage < totalPages && (
          <SoftPagination item onClick={() => onPageChange(currentPage + 1)}>
            <Icon>keyboard_arrow_right</Icon>
          </SoftPagination>
        )}
      </SoftPagination>
    </>
  );
}
Pagination.propTypes = {
  totalPages: PropTypes.number.isRequired,
  currentPage: PropTypes.number.isRequired,
  onPageChange: PropTypes.func.isRequired,
};
// Pagination.defaultProps = {
//   totalPages: 0,
//   currentPage: 1,
// };
export default Pagination;
